<template>
  <view class="swiperHead">
    <!-- 轮播图的开始 -->
    <swiper
      class="swiper"
      indicator-dots
      circular
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
    >
      <swiper-item class="swiperItem">
        <!--跳转页面-->
        <view>
          <image
            class="image"
            mode="widthFix"
            src="../../static/images/banner/lunbo1.jpg"
          >
          </image>
        </view>
      </swiper-item>
      <swiper-item class="swiperItem">
        <view>
          <image
            class="image"
            mode="widthFix"
            src="../../static/images/banner/lunbo2.jpg"
          >
          </image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 轮播图的结束 -->
  </view>
</template>

<script>
export default {
  name: "banner",
  data() {
    return {
      autoplay: true,
      interval: 1000 * 5,
      duration: 1000,
    };
  },
};
</script>

<style lang="scss" scoped>
/* 轮播图 */
.swiperHead {
  padding-top: 25rpx;

  .swiper {
    width: 730rpx;
    margin: 10rpx auto;

    .swiperItem {
      border-radius: 16rpx;

      .image {
        width: 100%;
      }
    }
  }
}
</style>
